import React, { Component, PureComponent } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Platform,
  BackHandler,
  SafeAreaView,
  InteractionManager,
  TouchableOpacity
} from 'react-native';
import { msg } from '@/common';
import { px2dp, isAndroid } from '@/styles';
import { featchGoodsDetail } from '@/api/goods';
import HeadTabs from '../../../components/HeadTabs';
import CarImg from './components/car-img';
import Summarize from './components/car-summarize';
import MemberBrand from './components/member-brand';
import Configuration from './components/car-configuration';
import ContactUs from './components/contactUs';

const tabSources = [
  {
    tab: '综述',
    type: 0
  }, {
    tab: '配置',
    type: 1
  }, {
    tab: '图片',
    type: 2
  },
  {
    tab: '经销商',
    type: 3
  }
];
/**
 * @author kanglang
 * @description 车辆详情
 * @createDate 2020/8/17
 */
export default class CarDetails extends Component {
  constructor(props) {
    super(props);
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { data } = params;
    this.state = ({
      status: 0,
      goodsDetail: {},
      data
    });
  }

    // 返回
    xmHandleBack = () => {
      msg.emit('router: back');
    }

    // 切换tab
    changeStatus = (status) => {
      this.setState({
        status
      });
    }

    componentDidMount() {
      InteractionManager.runAfterInteractions(() => {
        this.loadSummarize();
      });
      if (Platform.OS == 'android') {
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
      }
    }

    loadSummarize = () => {
      const { data } = this.state;
      featchGoodsDetail({ id: data && data.id }).then((res) => {
        if (res.success && res.data) {
          const goodsDetail = res.data;
          this.setState({ goodsDetail });
        } else {
          msg.emit('app:tip', { text: res.msg });
        }
      });
    }

    componentWillUnmount() {
      if (Platform.OS == 'android') {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
      }
    }

    onBackAndroid = () => {
      this.xmHandleBack();
      return true;
    }

    tabView = status => {
      const { data, goodsDetail } = this.state;
      switch (status) {
      case 0:
        return <Summarize id={data && data.id} />;
      case 1:
        return (
          <Configuration
            categoryId={data && data.categoryId}
            goodsId={data && data.id}
          />
        );
      case 2:
        return <CarImg goodsId={data && data.id} />;
      case 3:
        return <MemberBrand allianceMemId={goodsDetail && goodsDetail.allianceMemId} />;
      }
    }

    // 点击购买
    callUs = () => {
      const { goodsDetail } = this.state;
      const goodsPicVos = goodsDetail.appGoodsPicVOS;
      const goodsId = goodsPicVos && goodsPicVos.length > 0 ? goodsPicVos[0].goodsId : '';
      msg.emit('router: goToNext', {
        routeName: 'contactUs',
        goodsId
      });
    };

    render() {
      const { status, goodsDetail } = this.state;
      return (
        <SafeAreaView style={styles.safeView}>
          <View style={styles.container}>
            <HeadTabs
              innerStyle={styles.headInner}
              tabStyle={styles.tabStyle}
              activeStyle={styles.activeStyle}
              tabSources={tabSources}
              changeStatus={(type) => this.changeStatus(type)}
              status={status}
            />
            {this.tabView(status)}
            <ContactUs
              click={this.callUs}
              originalPrice={goodsDetail && goodsDetail.originalPrice}
            />
          </View>
        </SafeAreaView>
      );
    }
}

const styles = StyleSheet.create({
  safeView: {
    flex: 1,
    backgroundColor: '#FFF'
  },
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    // height: px2dp(40),
    flexDirection: 'column'
  },
  headInner: {
    paddingLeft: px2dp(40) * 2,
    paddingRight: px2dp(40) * 2
  },
  tabStyle: {
    fontSize: px2dp(15) * 2
  },
  activeStyle: {
    color: '#333232',
    fontSize: px2dp(16) * 2,
    fontWeight: 'bold'
  }
});
